<!DOCTYPE html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>等待付款</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    <!-- CSS here -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE"/>
    <link rel="stylesheet" href="assets/css/preloader.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/backToTop.css">
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
    <link rel="stylesheet" href="assets/css/ui-range-slider.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/my-style2.css">
    <style>
        .p1{
            font-size: 20px;
            color: red;
            font-weight: 700;
        }
    </style>
</head>

<body>
<!-- header area start -->
<header>
    <div class="header__area">
        <div class="header__top header__padding d-none d-sm-block">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-6 col-md-5 d-none d-md-block">
                        <div class="header__welcome">
                            <span>欢迎来到订单提交完成页面</span>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-7">
                        <div class="header__action d-flex justify-content-center justify-content-md-end">
                            <ul>
                                <li class="d-none d-xl-inline-block">
                                    <a th:if="${session.loginUser!=null}" href="javascript:;" th:text="${session.loginUser==null?'':session.loginUser.nickname}"></a>
                                    <a th:if="${session.loginUser==null}" href="http://huyulu666.top/login.html">登录/注册</a>
                                </li>
                                <li><a href="http://huyulu666.top:81/">个人信息管理中心</a></li>
                                <li><a href="http://huyulu666.top/center.html">我的订单</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- header area end -->

<!-- breadcrumb area start -->
<section class="breadcrumb__area box-plr-75">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xxl-12">
                <div class="breadcrumb__wrapper">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="http://huyulu666.top/index.html">首页</a></li>
                            <li class="breadcrumb-item"><a href="http://huyulu666.top/cart.html">购物车</a></li>
                            <li class="breadcrumb-item"><a href="http://huyulu666.top/pay.html">提交订单</a></li>
                            <li class="breadcrumb-item active" aria-current="page">在线支付</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb area end -->


<div id="max">


    <!--等待付款内容-->
    <div class="content">
        <div class="emph-tips">
            <div class="emph-tipss">
                <b></b>安全提醒：为了您的财产安全，<strong>不要点击陌生链接、不要向陌生人转账</strong>或透漏银行卡和验证码信息，<strong>谨防诈骗</strong>！
            </div>
        </div>
        <div class="order-state01">
            <div class="state-cont">
                <!-- 工具条 -->
                <div class="state-lcol">
                    <div class="state-top" th:text="'订单号：' + ${orderResponse.order.orderSn}">订单号：70716422916</div>
                    <h3 class="state-txt">等待付款</h3>

                    <span class="remain-time" style=""><b class="b1"></b>请在5分钟内完成支付</span>
                    <div class="state-btns">
                        <a th:href="'http://huyulu666.top/payOrder?orderSn='+${orderResponse.order.orderSn}" class="btn-1">付款</a>
                        <a class="btn-2">找人代付</a>
                    </div>
                    <div class="state-bottom">
                        <span class="span1"><b class="b1"></b>打印订单</span>
                        <span class="span2"><b class="b2"></b>取消订单</span>
                    </div>

                </div>

                <!-- 进度条 -->
                <div class="state-rcol">
                    <div class="state-rtop">
                        <!--提示信息 -->
                        <div class="ftx-03">
                            该订单会为您保留 6 小时（从下单之日算起）， 6 小时之后如果还未付款，系统将自动取消该订单。
                        </div>
                    </div>
                    <!--进度条 -->

                    <div id="process-04" class="order-process order-strike-process">
                        <div class="lioucheng">
                            <ul>
                                <li>等待付款</li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <div class="lioucheng_1">
                            <ul>
                                <li class="a1"></li>
                                <li class="b1"><img src="assets/img/shop/product/hongde.png"/></li>
                                <li class="a2"></li>
                                <li class="b2"><img src="assets/img/shop/product/huide.png"/></li>
                                <li class="a3"></li>
                                <li class="b2"><img src="assets/img/shop/product/huide.png"/></li>
                                <li class="a4"></li>
                                <li class="b2"><img src="assets/img/shop/product/huide.png"/></li>
                                <li class="a5"></li>
                            </ul>
                        </div>
                        <div class="lioucheng_2">
                            <ul>
                                <li>
                                    <p>提交订单</p>
                                    <p id='time'></p>
                                </li>
                                <li>
                                    <p class="color_p">付款成功</p>
                                    <p></p>
                                </li>
                                <li>
                                    <p class="color_p">商品出库</p>
                                    <p></p>
                                </li>
                                <li>
                                    <p class="color_p">等待收货</p>
                                    <p></p>
                                </li>
                                <li class="wancheng">
                                    <p class="color_p">完成</p>
                                    <p></p>
                                </li>

                            </ul>
                        </div>
                    </div>

                    <div class="state-others">
                        <span class="txt">完成订单可能获得：</span>
                        <a href="#none" class="btn-bean mr10" clstag="click|keycount|orderinfo|xqjingdou"><b
                                class="b1"></b>成长值</a>
                        <a href="#none" class="btn-coupon mr10" clstag="click|keycount|orderinfo|xqyouhuiquan"><b
                                class="b2"></b>积分</a>
                    </div>

                </div>
            </div>
            <div class="mb"></div>
        </div>
        <!--配送信息-->
        <div class="sta_xinxi">
            <ul>
                <li>
                    <div class="dl">
                        <div class="dt">
                            <h4>收货人信息
                            </h4>
                        </div>
                        <div class="dd">
                            <div class="item">
                                <span class="label">收货人：</span>
                                <div class="info-rcol" th:text="${orderResponse.order.receiverName}">张亚飞</div>
                            </div>
                            <div class="item">
                                <span class="label">地址：</span>
                                <div class="info-rcol" th:text="${orderResponse.order.receiverProvince} + ' ' + ${orderResponse.order.receiverUniversity} + ' ' + ${orderResponse.order.receiverDetailAddress}"></div>
                            </div>
                            <div class="item">
                                <span class="label">手机号码：</span>
                                <div class="info-rcol" th:text="${orderResponse.order.receiverPhone.substring(0,3)}  + '****' +  ${orderResponse.order.receiverPhone.substring(7)}">147****4726</div>
                            </div>

                        </div>
                    </div>
                </li>
                <li>
                    <div class="dl">
                        <div class="dt">
                            <h4>配送信息</h4>
                        </div>
                        <div class="dd">

                            <div class="item">
								<span class="label">配送方式：</span>
                                <div class="info-rcol">校内快送</div>
                            </div>

                            <div class="item">
								<span class="label">运费：</span>
                                <div class="info-rcol">
									<span class="f-price" th:text="'￥' + ${orderResponse.order.freightAmount}">¥12.00</span>
                                </div>
                            </div>

                            <div class="item">
								<span class="label">送货日期：</span>
                                <div class="info-rcol">支付后 2 天内</div>
                            </div>
                            <div class="item">
								<span class="label">送达时间：</span>
                                <div class="info-rcol">
                                    支付后 7 天内<span class="delivery-type">鹿准达</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dl" id="pay-info-nozero">
                        <div class="dt">
                            <h4>付款信息</h4>
                        </div>
                        <div class="dd">
                            <div class="item">
								<span class="label">付款方式：</span>
                                <div class="info-rcol">在线支付</div>
                            </div>

                            <div class="item">
								<span class="label">商品总额：</span>
                                <div class="info-rcol">
									<span class="f-price" th:text="'￥' + ${orderResponse.order.totalAmount}">¥21.80</span>
                                </div>
                            </div>

                            <div class="item">
                                <span class="label">运费金额：</span>
                                <div class="info-rcol">
                                    <span class="f-price" th:text="'￥' + ${orderResponse.order.freightAmount}">¥12.00</span>
                                    <span class="help-tip"></span>
                                </div>
                            </div>

                            <div class="item">
								<span class="label">应支付金额：</span>
                                <div class="info-rcol">
									<span class="f-price" th:text="'￥' + ${orderResponse.order.payAmount}">¥33.80</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="J-invoice-info" class="dl">
                        <div class="dt">
                            <h4>发票信息</h4>
                        </div>
                        <div class="dd">

                            <div class="item">
								<span class="label">发票类型：</span>
                                <div class="info-rcol">电子普通发票</div>
                            </div>
                            <div class="item">
								<span class="label">发票抬头：</span>
                                <div class="info-rcol">个人</div>
                            </div>

                            <div class="item">
								<span class="label">发票内容：</span>
                                <div class="info-rcol">商品明细</div>
                            </div>
                            <div id="invoiceTips" style="display:none">
                                <div class="prompt-box info-prompt-box">
                                    商品明细
                                </div>
                            </div>

                            <div class="item J-e-invoice">
                            </div>

                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!--商品信息-->
        <div class="shop_sta_xinin">
            <table>
                <tr>
                    <th width="30%">商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>积分</th>
                    <th>成长值</th>
                </tr>
                <tr th:each="orderItem:${orderResponse.orderItem}">
                    <td>
                        <img th:src="${orderItem.bookPic}" style="max-width: 70px; padding: 10px;"/>
                        <div style="display: inline-block; padding-top: 15px">
                            <p>
                                <b></b>
                                <a href="//item.jd.com/1778772.html" class="a-link" target="_blank"
                                    th:text="${orderItem.bookName}">
                                </a>
                            </p>
                        </div>
                    </td>
                    <td th:text="'￥' + ${#numbers.formatDecimal(orderItem.bookPrice,1,'COMMA',2,'POINT')}">￥0.00</td>
                    <td th:text="${orderItem.bookCount}">0</td>
                    <td th:text="'￥' + ${#numbers.formatDecimal(orderItem.realAmount,1,'COMMA',2,'POINT')}">0.00</td>
                    <td th:text="${orderItem.giftIntegration}">0</td>
                    <td th:text="${orderItem.giftGrowth}">0</td>
                </tr>
            </table>
            <div class="ccccc">
                <div class="right">
                    <div class="shuxing left">
                        <p>商品总额：</p>
                        <p>运　　费：</p>
                        <p>优惠总额：</p>
                        <p style="color: red;">应付总额：</p>
                    </div>
                    <div class="shuxing right">
                        <p th:text="'￥' + ${#numbers.formatDecimal(orderResponse.order.totalAmount,1,'COMMA',2,'POINT')}">¥21.80</p>
                        <p th:text="'￥' + ${#numbers.formatDecimal(orderResponse.order.freightAmount,1,'COMMA',2,'POINT')}">¥12.00</p>
                        <p th:text="'-￥' + ${#numbers.formatDecimal(orderResponse.order.promotionAmount + orderResponse.order.couponAmount + orderResponse.order.integrationAmount,1,'COMMA',2,'POINT')}">-¥0.00</p>
                        <p class="p1" th:text="'￥' + ${#numbers.formatDecimal(orderResponse.order.payAmount,1,'COMMA',2,'POINT')}">¥33.80</p>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            // $(".r1 span").mouseover(function () {
            //
            //     var index = $(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
            //     console.log(index)
            //     $(this).css('background', 'red').siblings().css('background', 'white')
            //     $(this).css('color', 'white').siblings().css('color', 'black')
            //     $(".xuanxiangka .ul1>li").eq(index).css('display', 'block').siblings().css('display', 'none');
            //
            // });
        </script>
    </div>
</div>

</div>
<script type="text/javascript">
    // $('.uls .i1').hover(function () {
    //     $('.xian_hied').css('display', 'block')
    // }, function () {
    //     $('.xian_hied').css('display', 'none')
    // })
    // $('.uls .i2').hover(function () {
    //     $('.weweima').css('display', 'block')
    // }, function () {
    //     $('.weweima').css('display', 'none')
    // })
    // $('.uls .i4').click(function () {
    //     $('html,body').animate({//$('html,body')兼容问题body属于chrome
    //         scrollTop: 0
    //     })
    // })
    // $('.close').click(function () {
    //     $('.xian_hied').toggle()
    // })
</script>
<div class="erweima">

</div>
</body>
<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/meanmenu.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/backToTop.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/nice-select.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/jquery-ui-slider-range.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>

</html>